<template>
  <div 
    :class="[
      'bx-avatar',
      `bx-avatar--${shape}`,
      `bx-avatar--${size}`,
      'bx-glass'
    ]"
    :style="avatarStyle"
  >
    <img 
      v-if="src && !imageError"
      :src="src"
      :alt="alt"
      class="bx-avatar__image"
      @error="handleImageError"
      @load="handleImageLoad"
    />
    <BxIcon 
      v-else-if="icon"
      :name="icon"
      class="bx-avatar__icon"
    />
    <span v-else-if="$slots.default" class="bx-avatar__text">
      <slot></slot>
    </span>
    <span v-else class="bx-avatar__text">
      {{ displayText }}
    </span>
  </div>
</template>

<script>
import { ref, computed } from 'vue'
import BxIcon from '../basic/BxIcon.vue'

export default {
  name: 'BxAvatar',
  components: {
    BxIcon
  },
  props: {
    src: {
      type: String,
      default: ''
    },
    alt: {
      type: String,
      default: ''
    },
    size: {
      type: [String, Number],
      default: 'medium',
      validator: (value) => {
        if (typeof value === 'number') return value > 0
        return ['small', 'medium', 'large'].includes(value)
      }
    },
    shape: {
      type: String,
      default: 'circle',
      validator: (value) => ['circle', 'square'].includes(value)
    },
    icon: {
      type: String,
      default: ''
    },
    text: {
      type: String,
      default: ''
    }
  },
  emits: ['error', 'load'],
  setup(props, { emit }) {
    const imageError = ref(false)

    const sizeMap = {
      small: 32,
      medium: 40,
      large: 48
    }

    const avatarStyle = computed(() => {
      const style = {}
      
      const size = typeof props.size === 'number' 
        ? props.size 
        : sizeMap[props.size]
      
      style.width = `${size}px`
      style.height = `${size}px`
      style.fontSize = `${size * 0.4}px`

      return style
    })

    const displayText = computed(() => {
      if (props.text) {
        // 取前两个字符
        return props.text.slice(0, 2).toUpperCase()
      }
      return 'U'
    })

    const handleImageError = (event) => {
      imageError.value = true
      emit('error', event)
    }

    const handleImageLoad = (event) => {
      imageError.value = false
      emit('load', event)
    }

    return {
      imageError,
      avatarStyle,
      displayText,
      handleImageError,
      handleImageLoad
    }
  }
}
</script>

<style scoped>
.bx-avatar {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid var(--bx-glass-border);
  background: var(--bx-glass-bg);
  backdrop-filter: var(--bx-glass-blur);
  transition: all var(--bx-transition-medium);
  font-family: var(--bx-font-family);
  user-select: none;
}

.bx-avatar--circle {
  border-radius: 50%;
}

.bx-avatar--square {
  border-radius: var(--bx-radius-medium);
}

.bx-avatar:hover {
  border-color: var(--bx-glass-border-hover);
  background: var(--bx-glass-bg-hover);
  transform: scale(1.05);
}

.bx-avatar__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

.bx-avatar__icon {
  font-size: 0.6em;
  color: var(--bx-text-primary);
}

.bx-avatar__text {
  color: var(--bx-text-primary);
  font-weight: 600;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* 尺寸变体 */
.bx-avatar--small {
  width: 32px;
  height: 32px;
  font-size: 12px;
}

.bx-avatar--medium {
  width: 40px;
  height: 40px;
  font-size: 16px;
}

.bx-avatar--large {
  width: 48px;
  height: 48px;
  font-size: 20px;
}

/* 渐变背景效果 */
.bx-avatar::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.1) 0%,
    rgba(255, 255, 255, 0.05) 100%
  );
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--bx-transition-medium);
}

.bx-avatar:hover::before {
  opacity: 1;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .bx-avatar--small {
    width: 28px;
    height: 28px;
    font-size: 11px;
  }
  
  .bx-avatar--medium {
    width: 36px;
    height: 36px;
    font-size: 14px;
  }
  
  .bx-avatar--large {
    width: 44px;
    height: 44px;
    font-size: 18px;
  }
}
</style>

